import { createTheme } from '@mui/material/styles';

// Use default theme values directly to avoid build issues
// These values match css/variables.less
const vars = {
    primaryColor: '#6f54aa',
    secondaryColor: '#8b6fc2',
    font: 'Roboto, sans-serif',
    fontColor: '#ffffff',
    bgLight: '#2a2a2a',
    bgRegular: '#1e1e1e',
    bgDark: '#161616',
    bgDarker: '#121212',
    bgDarkest: '#0a0a0a',
    bgInputs: '#2a2a2a',
    gutter: '8px',
    radius: '4px',
    canvasBgDark: '#121212',
    canvasBgLight: '#1e1e1e',
    experimentAutocompleteBorder: '#3a3a3a',
    experimentInputColor: '#ffffff',
    experimentGrey: '#666666',
    experimentFieldColor: '#ffffff',
    experimentSvgColor: '#999999',
    experimentLabelColor: '#cccccc',
    errorFieldBorder: '#ff0000',
    primaryColorHover: '#8b6fc2',
    fabDisableColor: '#666666',
    fabDisableBg: '#2a2a2a',
    navShadow: '0 2px 4px rgba(0,0,0,0.3)',
    tabsTextColor: '#cccccc',
    textColor: '#ffffff',
};

require('./css/netpyne.less');
require('./css/material.less');
require('./css/traceback.less');
require('./css/flexlayout.less');
require('./css/tree.less');

export const {
  primaryColor,
  secondaryColor,
  font,
  fontColor,
  bgLight,
  bgRegular,
  bgDark,
  bgDarker,
  bgDarkest,
  bgInputs,
  gutter,
  radius,
  canvasBgDark,
  canvasBgLight,
  experimentAutocompleteBorder,
  experimentInputColor,
  experimentGrey,
  experimentFieldColor,
  experimentSvgColor,
  experimentLabelColor,
  errorFieldBorder,
  primaryColorHover,
  fabDisableColor,
  fabDisableBg,
  navShadow,
  tabsTextColor,
  textColor,
} = vars;

// Create theme using MUI v5 API
const theme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: primaryColor,
      dark: secondaryColor,
    },
    secondary: {
      main: secondaryColor,
      dark: primaryColor,
    },
    background: {
      default: bgDarkest,
      paper: bgRegular,
    },
    text: {
      primary: fontColor,
    },
  },
  typography: {
    htmlFontSize: 16,
    fontSize: 14,
    fontFamily: font,
    button: {
      textTransform: 'none',
      fontSize: '1.0rem',
    },
  },
  components: {
    MuiInput: {
      styleOverrides: {
        input: {
          outline: 'none !important',
          border: 'none !important',
          boxShadow: 'none !important',
        },
        root: {
          color: fontColor,
        },
      },
    },
    MuiSwitch: {
      styleOverrides: {
        root: {
          padding: 0,
          width: '2.25rem',
          height: '1.25rem',
        },
        thumb: {
          width: '1rem',
          backgroundColor: textColor,
          height: '1rem',
          boxShadow: '0rem 0.0625rem 0.125rem 0rem rgba(16, 24, 40, 0.06), 0rem 0.0625rem 0.1875rem 0rem rgba(16, 24, 40, 0.10)',
        },
        switchBase: {
          padding: '0 !important',
          left: '0.125rem',
          top: '0.125rem',
          '&.Mui-checked': {
            transform: 'translateX(1rem)',
            '& + .MuiSwitch-track': {
              opacity: 1,
              backgroundColor: `${primaryColor} !important`,
            },
          },
        },
        track: {
          borderRadius: '0.75rem',
          opacity: 1,
          backgroundColor: 'rgba(255, 255, 255, 0.05)',
        },
      },
    },
    MuiSelect: {
      styleOverrides: {
        root: {
          outline: 'none !important',
          border: 'none !important',
          boxShadow: 'none !important',
        },
        select: {
          '&:focus': {
            background: 'none',
          },
        },
      },
    },
    MuiGrid: {
      styleOverrides: {
        root: {
          display: 'flex',
          alignItems: 'stretch',
          flex: 1,
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          backgroundColor: `${bgDarker} !important`,
          overflowY: 'auto',
          flex: 1,
        },
      },
    },
    MuiBottomNavigation: {
      styleOverrides: {
        root: {
          margin: gutter,
          backgroundColor: 'transparent',
        },
      },
    },
    MuiPaper: {
      styleOverrides: {
        root: {
          color: 'inherit',
          backgroundColor: bgRegular,
        },
      },
    },
    MuiBottomNavigationAction: {
      styleOverrides: {
        root: {
          color: fontColor,
          textTransform: 'uppercase',
          padding: '0.375rem 0.75rem 0.5rem !important',
          maxWidth: '10.5rem',
          minWidth: '5rem',
          '& .MuiBottomNavigationAction-wrapper': {
            lineHeight: '1.428125rem',
          },
        },
        label: {
          fontSize: '1rem',
          '&.Mui-selected': {
            fontSize: '1rem',
          },
        },
      },
    },
    MuiFab: {
      styleOverrides: {
        secondary: {
          color: fontColor,
        },
        primary: {
          color: fontColor,
        },
        root: {
          '&:not(.Mui-disabled).MuiFab-primary': {
            backgroundColor: primaryColor,
            '&:hover': {
              backgroundColor: secondaryColor,
            },
          },
          '&:not(.Mui-disabled).MuiFab-secondary': {
            backgroundColor: secondaryColor,
            '&:hover': {
              backgroundColor: primaryColor,
            },
          },
          '&.Mui-disabled': {
            color: fabDisableColor,
            boxShadow: 'none',
            backgroundColor: fabDisableBg,
          },
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          '&.MuiButtonGroup-grouped': {
            minWidth: '2.5rem',
          },
          '&.noHover': {
            backgroundColor: 'transparent',
          },
        },
        contained: {
          color: fontColor,
          backgroundColor: bgInputs,
        },
        containedSecondary: {
          color: fontColor,
        },
        containedPrimary: {
          color: fontColor,
        },
      },
    },
    MuiMenuItem: {
      styleOverrides: {
        root: {
          color: fontColor,
          paddingTop: `calc(${gutter} / 2)`,
          fontSize: '1.0rem',
        },
        gutters: {
          paddingLeft: `calc(${gutter} * 2)`,
          paddingRight: `calc(${gutter} * 2)`,
        },
      },
    },
    MuiDialogTitle: {
      styleOverrides: {
        root: {
          color: fontColor,
        },
      },
    },
    MuiDialogActions: {
      styleOverrides: {
        root: {
          '& .MuiButton-root': {
            textTransform: 'uppercase',
          },
        },
      },
    },
    MuiTypography: {
      styleOverrides: {
        root: {
          color: fontColor,
        },
      },
    },
    MuiAccordionSummary: {
      styleOverrides: {
        root: {
          padding: '0 !important',
          margin: 0,
          minHeight: 'unset !important',
        },
        content: {
          margin: '0 !important',
          cursor: 'auto',
        },
        expandIconWrapper: {
          marginRight: 0,
        },
      },
    },
    MuiAccordionDetails: {
      styleOverrides: {
        root: {
          padding: 0,
          margin: 0,
          minHeight: 'unset !important',
          flexDirection: 'column',
        },
      },
    },
    MuiAccordion: {
      styleOverrides: {
        root: {
          padding: 0,
          margin: '0 !important',
          minHeight: 'unset',
        },
      },
    },
    MuiAutocomplete: {
      styleOverrides: {
        root: {
          '& .MuiIconButton-root': {
            padding: '0.125rem !important',
          },
        },
        popupIndicator: {
          marginRight: 0,
        },
      },
    },
    MuiCardContent: {
      styleOverrides: {
        root: {
          padding: 8,
        },
      },
    },
    MuiListItem: {
      styleOverrides: {
        root: {
          '&.MuiButtonBase-root': {
            color: 'white',
            paddingTop: '.5rem',
            whiteSpace: 'nowrap',
            paddingBottom: '0.375rem',
            display: 'flex',
            justifyContent: 'flex-start',
            textDecoration: 'none',
            textAlign: 'left',
            alignItems: 'center',
          },
          '&.MuiListItem-dense': {
            padding: '0.25rem 0.5rem',
            borderRadius: '0.25rem',
            justifyContent: 'flex-start',
          },
          '&.MuiMenuItem-gutters': {
            paddingLeft: '2rem',
            paddingRight: '2rem',
          },
        },
      },
    },
    MuiIconButton: {
      styleOverrides: {
        root: {
          color: fontColor,
          padding: '0.75rem !important',
        },
      },
    },
  },
});

export default theme;

